<template>
  <view class="integralRecord">
    <view class="recored_item" v-for="item in recordList.lists" :key="item.id">
      <view class="recored_item_top">
        <view class="fn-sz-28 fn-cl-999999">{{ item.create_time }}</view>
        <view class="fn-sz-30 fn-cl-666666">
          <span v-if="item.status == 'wait'">待发货</span>
          <span v-if="item.status == 'send'">已发货</span>
        </view>
      </view>
      <view class="recored_info">
        <view class="recored_img">
          <image :src="item.image" mode=""></image>
        </view>
        <view class="recored_details">
          <view class="recored_name more-text2">{{ item.product_name }}</view>
          <view class="fn-sz-26 fn-cl-999999" v-if="item.express_no">
            <span class="mar-right-10">{{ item.express_company }}</span>
            <span>{{ item.express_no }}</span>
          </view>
          <view class="check_express_no" v-if="item.express_no">
            <view class="inner_btn"><button class="white_btn" @tap="goLogistics(item)">查询物流</button></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import com from '../../mixin/index.js';
export default {
  mixins: [com],
  data () {
    return {
      page: {
        page: 1,
        page_size: 4
      },
      recordList: {
        lists: [],
        total: 1,
        total_page: 0
      }
    };
  },
  onLoad () {
    this.getConvertList();
  },
  onReachBottom () {
    this.getConvertList();
  },
  methods: {
    getConvertList () {
      this.getList('recordList', 'getConvertList', 'page', { ...this.page });
    },
    goLogistics (item) {
      uni.navigateTo({
        url: `/pages/integralShop/integralLogistics?id=${item.id}`
      });
    }
  }
};
</script>

<style lang="scss">
.integralRecord {
  padding: 24rpx;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: #f9f9f9;
  .recored_item {
    background: #ffffff;
    border-radius: 20rpx;
    padding: 31rpx 24rpx;
    margin-bottom: 20rpx;
    .recored_item_top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx dashed #cccccc;
      margin-bottom: 30rpx;
      padding-bottom: 23rpx;
    }
    .recored_info {
      display: flex;
      align-items: center;
      .recored_img {
        margin-right: 18rpx;
        flex: none;
        image {
          width: 180rpx;
          height: 180rpx;
          border-radius: 10rpx;
        }
      }
      .recored_details {
        flex: 1;
        .recored_name {
          margin-bottom: 10rpx;
        }
        .check_express_no {
          display: flex;
          margin-top: 20rpx;
          justify-content: flex-end;
          width: 100%;
          .inner_btn {
            width: 166rpx;
            button {
              width: 166rpx;
              text-align: center;
              font-size: 26rpx;
              height: 56rpx;
              line-height: 56rpx;
            }
          }
        }
      }
    }
  }
}
</style>
